<template>
	<div>
		<p class="p-top">为你推荐</p>
		<!-- 热门漫展 -->
		<div class="home-countdown">
			<div class="time" @click="goCategorya">
				<div class="time-left">
					<van-icon name="fire" color="red" size="20px" />
					<span>热门漫展</span>
				</div>
				<span>更多 ></span>
			</div>
			<van-card
				@click="bindIda(it)"
				v-for="(it, index) in exhibitionList"
				:tag="it.label"
				:desc="`${it.city_name}  ${it.district_name}`"
				:title="it.project_name"
				:thumb="`/api${it.banner}`"
			>
				<template #tags>
					<van-tag plain type="danger">{{ it.project_type }}</van-tag>
					<van-tag plain type="danger">{{ it.countdown }}</van-tag>
					<van-tag plain type="danger">{{ it.venue_name }}</van-tag>
				</template>
				<!-- 加入购物车 -->
				<template #footer>
				</template>
			</van-card>
		</div>

		<!-- 精品周边 -->
		<div class="home-countdown">
			<div class="time" @click="goCategoryb">
				<div class="time-left">
					<van-icon name="gem" color="#01cb88" size="20px" />
					<span>精选周边</span>
				</div>
				<span>更多 ></span>
			</div>
			<van-card
				@click="bindIdb(it)"
				v-for="it in peripheryList"
				:tag="it.label"
				:desc="`本月销量：${it.like}`"
				:title="it.name"
				:thumb="`/api${it.itemsImg}`"
			>
				<template #tags>
					<van-tag plain type="danger">{{ it.ipRightName }}</van-tag>
				</template>
				<!-- 加入购物车 -->
			</van-card>
		</div>

		<!-- 精彩电影 -->
		<div class="home-countdown">
			<div class="time" @click="goCategoryc">
				<div class="time-left">
					<van-icon name="video" color="#ffb62d" size="20px" />
					<span>精彩电影</span>
				</div>
				<span>更多 ></span>
			</div>
			<van-card
                @click="bindIdc(it)"
				v-for="it in filmList"
				:tag="it.sc"
				:desc="`主演：${it.star}`"
				:title="it.name"
				:thumb="`/api${it.img}`"
			>
				<template #tags>
					<van-tag plain type="danger" v-for="item in it.ver">{{ item }}</van-tag>
				</template>
				<!-- 加入购物车 -->
			</van-card>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getPeripheryList, getExhibitionList, getFilmList,} from '../../api/homeApi.js'
import { useRouter } from 'vue-router'

const router = useRouter()
let peripheryList = ref([])
let exhibitionList = ref([])
let filmList = ref([])
let monveId = ref([])

// 周边
async function setPeripheryList() {
	const data = await getPeripheryList(1, 6)
	if (data.code === 200) {
		peripheryList.value = data.data.rows
	}
}
// 详情
function bindIdb(it) {
	monveId = it.itemsId
	router.push({ path: '/peripheral', query: { itemsId: monveId } })
}
// 跳转周边分类
const goCategoryb = () => {
	router.push('/zhoubian')
}
// 漫展
async function setExhibitionList() {
	const data = await getExhibitionList(1, 6)
	if (data.code === 200) {
		exhibitionList.value = data.data.rows
	}
}
// 详情
function bindIda(it) {
	monveId = it.id
	router.push({ path: '/comiccondetails', query: { id: monveId } })
}
// 跳转漫展分类
const goCategorya = () => {
	router.push('/manzhan')
}
// 电影
async function setFilmList() {
	const data = await getFilmList(1, 6)
	if (data.code === 200) {
		filmList.value = data.data.rows
	}
}
// 详情
function bindIdc(it) {
	monveId = it.id
	router.push({ path: '/details', query: { id: monveId } })
}
// 跳转电影分类
const goCategoryc = () => {
	router.push('/dianying')
}


onMounted(() => {
	setPeripheryList()
	setExhibitionList()
	setFilmList()
})
</script>

<style lang="scss" scoped>
@import '../../styles/index.scss';

.p-top {
	margin: 15px 0px 0px 15px;
}
.home-countdown {
	margin: 15px;
	margin-top: 20px;
	background: #fff;
	border-radius: 10px;
	border: 1px solid #ececec;
	.time {
		height: 32px;
		font-size: 18px;
		display: flex;
		justify-content: space-between;
		.time-left {
			margin-left: 10px;
			span {
				margin-left: 5px;
				line-height: 32px;
			}
		}
		span {
			margin-right: 10px;
			line-height: 32px;
		}
	}
	.van-card {
		margin-top: 10px;
	}
}
</style>
